import React from 'react';
import { Toast,Carousel } from 'antd-mobile';
import wx from 'weixin-js-sdk';

export default class Index extends React.Component {
    constructor(props){
        super(props)
        this.state={
			banner: [],
			hot_active: [],
			gy_active: [],
			out_active: [],
		}
    }
	componentDidMount(){
		document.title = '报名'
		global.Ajax.hhtc_request("user/get_qrcode",{}).then(data=>{
			console.log('第一步 ', data);
if(data.code===1){
	this.setState(data.data)
			}
	});
	
	global.Ajax.hhtc_request("web/get_share",{windowurl:window.location.href}).then(data=>{
			console.log('分享页面的数据 ', data);
			if (data.code === 1) {
					wx.config({
							debug : false,
							appId : data.data.appId,
							timestamp : data.data.timestamp,
							nonceStr : data.data.noncestr,
							signature : data.data.signature,
							jsApiList : [
									// 所有要调用的 API 都要加到这个列表中
									"updateTimelineShareData", //分享给好友
									"updateAppMessageShareData", //分享到朋友圈
							]
					})
					
					wx.checkJsApi({
							jsApiList: ['updateTimelineShareData','updateAppMessageShareData'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
							success: function(res) {
									console.log('checkJsApi--',res)
									// 以键值对的形式返回，可用的api值true，不可用为false
									// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
							}
					});
					wx.error(function(res){
							console.log(res)
							// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
					});
					
					wx.ready(()=>{
							//配置好需要分享的几个配置，这里只是演示，实际开发中应该是动态的变量
							var shareData = {
									title: '好友邀请你加入艺看学院',
									desc: '你的好友正在邀请你加入艺看学院，快来看看吧',
									link: window.location.href.split('#')[0],
									imgUrl: 'https://yksy.qianjitianxia.com/o_1eiao12gcfa6122j1eicun0pjl8.png',//传递给微信需传递完整的带url链接
									success:function() {
											global.Ajax.hhtc_request("user/share",{}).then(data=>{
													console.log('data: ', data);
													// return Toast.success(data.msg);
											})
									}
							};

							//调用各个接口并传入配置变量
							wx.updateTimelineShareData(shareData);
							wx.updateAppMessageShareData(shareData);
					});
			}
	});



		
	}
	render(){
		return(
			<div className='' style={{paddingBottom: 70,}}>
				<Carousel
					autoplay={false}
					infinite
					className='index_banner index_banner1'
					dotStyle={{width: 4,height: 4,borderRadius: '100%',background: 'rgba(255,255,255,.75)',marginBottom: 6,}}
					dotActiveStyle={{width: 10,height: 4,borderRadius: 4,background: '#fff',marginBottom: 6,}}
				>
					{this.state.banner.map((item,index) => {
						if(item.url===''){
							return(
								<img key={'banner'+index} alt='' src={item.img} className='signtopbg' />
							)
						}else{
							return(
								<img key={'banner'+index} alt='' src={item.img} onClick={()=>{
									this.props.history.push(item.url)
								}} className='banner_img' />
							)
						}
					})}
				</Carousel>
				<div className='title_box'>
					<h1>火热报名中</h1>
					<p onClick={()=>{this.props.history.push('/page/home/home/activity/活动报名/2')}}>
						<span>更多</span>
						<img alt='' src={require('../../imgs/r2.png')} />
					</p>
				</div>
				<div className='sign_index_list'>
					{this.state.hot_active.map((item,index)=>{
						return(
							<div key={'list'+index} className='item' onClick={()=>{this.props.history.push('/page/home/signup/detail/'+item.id)}}>
								<img alt='' src={item.img} className='pic' />
								<p className='title'>{item.title}</p>
								<p className='desc'>{item.info}</p>
								<p className='peop'>{item.name}</p>
							</div>
						)
					})}
				</div>
				<div className='title_box'>
					<h1>公益活动</h1>
					<p onClick={()=>{this.props.history.push('/page/home/home/activity/公益活动/3')}}>
						<span>更多</span>
						<img alt='' src={require('../../imgs/r2.png')} />
					</p>
				</div>
				<div className='sign_index_list'>
					{this.state.gy_active.map((item,index)=>{
						return(
							<div key={'gy'+index} className='item' onClick={()=>{this.props.history.push('/page/home/signup/detail/'+item.id)}}>
								<img alt='' src={item.img} className='pic' />
								<p className='title'>{item.title}</p>
								<p className='desc'>{item.info}</p>
								<p className='peop'>{item.name}</p>
							</div>
						)
					})}
				</div>
				<div className='title_box'>
					<h1>往期活动</h1>
					<p onClick={()=>{this.props.history.push('/page/home/home/activity/往期活动/4')}}>
						<span>更多</span>
						<img alt='' src={require('../../imgs/r2.png')} />
					</p>
				</div>
				<div className='sign_before_list'>
					{this.state.out_active.map((item,index)=>{
						return(
							<div key={'out'+index} className='item' onClick={()=>{this.props.history.push('/page/home/signup/detail/'+item.id)}}>
								<img alt='' src={item.img} className='pic' />
								<p className='title'>{item.title}</p>
								<p className='desc'>{item.info}</p>
								<p className='peop'>{item.name}</p>
							</div>
						)
					})}
				</div>
			</div>
		)
	}
}
